<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>idea快捷键列表展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"  media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="">

                <div class="layui-inline">
                   <!-- <label class="layui-form-label">关键字</label>-->
                    <div class="layui-input-inline">
                        <input type="text" name="remark" id="remark" lay-verify="date" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                    </div>

                </div>


            <button type="button" class="layui-btn layui-btn-primary" onclick="serachBtn()"
                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
            </button>

            <button type="button" class="layui-btn layui-btn-primary" onclick="resethBtn()">
                <i class="fa fa-refresh"></i> 重 置
            </button>
        </form>

        <table class="layui-table" lay-skin="row" id="emps_table">
            <colgroup>
                <col width="30">
                <col width="100">
                <col width="300">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>id</th>
                <th>快捷键</th>
                <th>键位描述</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

       <div id="demo0"></div>

    </div>
</div>
<script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script src="Layuimini/echarts/echarts.min.js" th:src="@{Layuimini/echarts/echarts.min.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
        var laypage = layui.laypage
            , layer = layui.layer
            , layedit = layui.layedit;

        var total;
        var current;
        var size;


        $.ajax({
            url:"ideaShortcutKey/getIdeaKey",
            type:"GET",
            async: false, //指定为同步请求，才能给下面data1赋值
            success:function(result){
               // console.log(result);
                resultROW = result
                total = result.data.ideaShortcutKeyPage.total
                current = result.data.ideaShortcutKeyPage.current
                size =result.data.ideaShortcutKeyPage.size
            }
        });



        laypage.render({
            elem: 'demo0'
            ,count: total
            ,limit:size
            ,layout: ['prev', 'page', 'next', 'skip','count']
            ,jump: function(obj, first){
              //  console.log(obj)
                if(!first){
                    curnum = obj.curr;
                    limitcount = obj.limit;
                    to_page(curnum);
                   // console.log("limitcount"+limitcount);
                    //layer.msg(curnum+"-"+limitcount);
                }
            }
        });


    });


function resethBtn(){
        $("#remark").val("");
        window.location.reload();
    }

var pageN ={page:1,remark:""};
var totalRecord,currentPage;

$(function(){
    //去首页
    to_page(1);
});

function to_page(pn){
    $.ajax({
        url:"ideaShortcutKey/getIdeaKey",
        //data:"pn="+pn,
        data:{page:pn,remark:pageN.remark},
        type:"GET",
        success:function(result){
            //console.log(result);
            //1、解析并显示员工数据
            build_emps_table(result);

        }
    });
}

function build_emps_table(result){
    //清空table表格
    $("#emps_table tbody").empty();
    var key = result.data.ideaShortcutKeyPage.records;
    $.each(key,function(index,item){
        var keyId = $("<td></td>").append(item.id);
        var keyIn = $("<td></td>").append(item.keyIn);
        var remark = $("<td></td>").append(item.remark);

        //var delBtn =
        //append方法执行完成以后还是返回原来的元素
        $("<tr></tr>").append()
            .append(keyId)
            .append(keyIn)
            .append(remark)
            .appendTo("#emps_table tbody");
    });
}

    //点击查询按钮
    function serachBtn(){
        var remark = $("#remark").val();
        if(remark==""){
            layer.tips("请输入要查询的条件!","#remark",{tips:1});
            return false;
        }
        pageN.remark=remark;
        to_page(1,remark);
    }

</script>


</body>
</html>